<template>
    <div>
         <div class="beijingtu" v-if="username=='' ">
             <router-link to="login"><p>登录</p></router-link> 
              <img src="../assets/212.png" alt="" style="width:100%;">
         </div>

         <div v-else>
           <div class="mk_red">
                 <p><img src="../assets/73.jpg" alt="" style="width:100px;"></p> 
                 <h4>{{username}}</h4>
                 <h6>2017年加入，我要好好学习天天向上~</h6>

           </div>
              <div class="mk_ios">
                <ul>
                  <li class="mk_1">我的订阅</li>
                  <li class="mk_1">我的收藏</li>
                  <li>我的下载</li>
                </ul>
              </div>

              <p class="mk_3"></p>
              <div class="mk_4">
                <b>在学的课程</b>
              </div>
              <div v-for="(item,i) in girl" :key="i" class="mk_boy">
                    <p>{{item.title}}</p>
                     <img :src="require(`../assets/${item.img}`)" alt="" style="width:150px;height:100px;">
              </div>
         </div>
    </div>
</template>

<script>
import axios from "axios";
import {getxiang} from "@/api"
// import Swiper from "swiper"
// import "swiper/css/swiper.min.css"

    export default {
        data(){
          return{
            username:"",
            girl:[]
          }
        },
        mounted() {
          this.username = JSON.parse(localStorage.getItem("user")).username || ''
           let { id } = this.$route.query;
           console.log(id)
            getxiang(id).then((res) => {
            this.girl = res.data;
            console.log(res)
              });
        },
    }
</script>

<style scoped>
.mk_boy{
  display: flex;
  font-size: 10px;
  justify-content: space-around;
}
.mk_4{
  width: 100%;
}
.mk_4 b{
  margin: 20px;
  display: inline-block;
}
.mk_3{
  width: 100%;
  height: 10px;
  background: #f3f3f3;
  margin-top: 20px;
}
.mk_1{
  border-right: 1px solid rgb(167, 165, 165);
}

.mk_ios{
  width: 100%;
}
.mk_ios ul{
  display: flex;
  justify-content: space-between;
}
.mk_ios ul>li{
  width: 150px;
  /* background: pink; */
  text-align: center;
  list-style: none;
}
.mk_red{
  width: 100%;
  height: 140px;
  /* background: pink; */
}
.mk_red h4{
  float: left;
  margin-top: 40px;
}
.mk_red h6{
  float: left;
  margin-top: 5px;
}
.mk_red p{
  width: 100px;
  float: left;
  height: 100px;
  margin: 20px;
}
.mk_red img{
  border-radius:50px ;
}
.beijingtu{
  width: 100%;
  text-align: center
}
.beijingtu p{
  width: 29%;
  line-height: 100px;
  border-radius: 50%;
  background:green;
  margin: 100px auto;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 108px;
}
</style>